<template>
	<view>
		<u-navbar :is-back="false" :title="opacity == 1 ? data.merchantName || '店铺详情' : ' '" title-color="#000" immersive
		 back-icon-color="#ffffff" :background=" {
			backgroundColor:'rgba(255,255,255,'+opacity+')'
		}" :border-bottom="false">

			<view @click="$u.route({type:'back'})" class="back-icon" :style="{
				backgroundColor:`rgba(0,0,0,${opacity == 1 ? '0' : '0.3'})`
			}">
				<u-icon :color="opacity == 1 ? '#000' : '#fff'" size="30" name="arrow-left"></u-icon>
			</view>
		</u-navbar>

		<view class="loading" v-if="loading || fail">
			<u-loading v-if="loading"></u-loading>
			<u-empty mode="page" v-if="fail"></u-empty>
		</view>
		<block v-else>
			<u-image @click="previewLogo" :src="imageURL + data.imgLogo" height="560" width="100%"></u-image>
			<view class="store-info">
				<view class="store-name">{{data.merchantName}}</view>
				<view class="rate">
					<view>评价：</view>
					<u-rate size="20" active-color="#F39D21" :count="5" value="5"></u-rate>
					<view class="rate-number">5.0</view>

					<view style="margin-left: 30rpx;">销量：0</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="address" @click="previewLocation">
				<view class="address-text">{{data.merchantAddress}}</view>
				<u-image :src="appletImgUrl+'store-address-icon.png'" width="60" height="60"></u-image>
			</view>
			<view class="notice">
				<!-- <view>销量：0</view> -->
				<view>公告：暂无公告</view>
			</view>
			<u-gap></u-gap>
			<view class="fixed-icon">
				<u-image @click="showTip" width="138" height="138" :src="appletImgUrl+'store-scq.png'"></u-image>
				<u-image @click="call" width="138" height="138" :src="appletImgUrl+'store-call-icon.png'"></u-image>
			</view>
			
			
		</block>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				tabIndex: 0,
				showMask:true,
				tab: [
					'商品',
					'商铺',
					'评价'
				],
				loading: true,
				fail: false,
				data: '',
				winHeight: uni.getSystemInfoSync().windowHeight - (44 + uni.getSystemInfoSync().statusBarHeight + uni.upx2px(100)),
				upperPartHeight: 44 + uni.getSystemInfoSync().statusBarHeight,
				opacity: 0,
				imageURL: this.imageURL
			}
		},
		onReady() {

		},
		onPageScroll({
			scrollTop
		}) {
			this.$u.debounce(() => {
				this.$u.getRect('.tab').then(rect => {
					console.log(rect.top);
					if (rect.top == this.upperPartHeight) {
						this.showMask = false
					}
					if(rect.top > this.upperPartHeight){
						this.showMask = true
					}
				})
			}, 300)

			var opacity = 0,
				maxNumber = uni.getSystemInfoSync().statusBarHeight + 44
			if (scrollTop <= maxNumber) {
				opacity = scrollTop / maxNumber
			} else {
				opacity = 1
			}
			if (opacity == this.opacity) return
			this.opacity = opacity
		},
		onLoad(options) {
			this.$u.get('sellerstore/info/' + options.id).then(res => {
				console.log(res);
				this.data = res
				this.loading = false
				uni.setNavigationBarTitle({
					title: res.merchantName
				})
			}).catch(error => {
				this.fail = true
				this.loading = false
			})
		},
		methods: {
			previewLogo() {
				uni.previewImage({
					urls: [this.imageURL + this.data.imgLogo]
				})
			},
			showTip() {
				uni.showToast({
					title: '后续开放！',
					icon: 'none'
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.data.merchantPhone
				})
			},
			previewLocation() {
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.data.latitude, this.data.longitude);
				uni.openLocation({
					latitude: GCJ_Coordinate.latitude,
					longitude: GCJ_Coordinate.longitude,
					success(res) {
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.item3 {
		background-color: #fff;
		padding: 0 30rpx;

		.item {
			border-top: 1rpx solid #EDEDED;
			padding: 30rpx 0;

			.photo {
				>view {
					margin-top: 20rpx;
					display: inline-block;
					padding: 0 10rpx;
				}
			}

			.comment {
				padding: 20rpx 0;
				padding-bottom: 0rpx;
				line-height: 40rpx;
			}

			.user {
				display: flex;
				align-items: center;

				.user-info {
					flex: 1;
					padding-left: 15rpx;

					>view {
						&:last-child {
							font-size: 24rpx;
							color: #aaa;
							margin-top: 5rpx;
						}
					}
				}
			}
		}

		.title {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			font-weight: 800;
			line-height: 80rpx;
			// border-bottom: 1rpx solid #EDEDED;
		}
	}

	.item2 {
		background-color: #fff;
		padding: 0 30rpx;
		padding-top: 30rpx;
		padding-bottom: 10rpx;

		.title {
			font-size: 36rpx;
			margin-bottom: 20rpx;
			font-weight: 800;
		}

		.text {
			padding: 20rpx 0;
		}

		.store-photo {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 60rpx;

			>view {
				padding: 0 10rpx;
			}
		}
	}

	.item1 {
		display: flex;
		background-color: #F7F7F7;
		position: relative;

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.right {
			background-color: #fff;
			flex: 1;
			border-top-left-radius: 30rpx;
			padding: 0 30rpx;
			height: 100%;
			overflow: auto;

			.item {
				padding: 30rpx 0;
				display: flex;

				.info {
					flex: 1;
					padding-left: 20rpx;
					position: relative;

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.sale {
						font-size: 22rpx;
						color: #AAAAAA;
						padding-top: 10rpx;
					}

					.money {
						color: #FF4D46;
						position: absolute;
						bottom: 0;
						font-size: 24rpx;
						font-weight: 500;

						text {
							font-size: 36rpx;
						}
					}
				}
			}
		}

		.left {
			width: 220rpx;
			height: 100%;
			overflow: auto;

			>view {
				// line-height: 100rpx;
				text-align: center;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.active {
					background-color: #fff;
				}
			}
		}
	}

	.tab {
		display: flex;
		justify-content: center;
		background-color: #fff;
		height: 100rpx;
		// align-items: center;
		padding-top: 20rpx;
		position: sticky;
		z-index: 10;
		left: 0;

		>view {
			flex: 1;
			text-align: center;
			color: #AAAAAA;
			font-size: 36rpx;
			font-weight: bold;
			position: relative;

			&.active {
				color: #333;
			}

			.icon {
				width: 44rpx;
				opacity: 0;
				transition: opacity .3s;
				position: absolute;
				left: 50%;
				height: 10rpx;
				bottom: 42rpx;
				transform: translateX(-50%);

				&.active {
					opacity: 1;
				}
			}
		}
	}

	.fixed-icon {
		position: absolute;
		right: 10rpx;
		top: 491rpx;
		display: flex;
		// bottom: 120rpx;
	}

	.notice {
		background-color: #fff;
		padding: 0 30rpx;

		>view {
			line-height: 100rpx;
		}
	}

	.address {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
		padding-bottom: 0;

		.address-text {
			flex: 1;
			margin-right: 30rpx;
		}
	}

	.store-info {
		background-color: #fff;
		padding: 30rpx;

		.rate {
			align-items: center;
			display: flex;

			.rate-number {
				color: #EABC05;
				margin-left: 10rpx;
				font-size: 24rpx;
			}
		}

		.store-name {
			font-weight: bold;
			font-size: 36rpx;
		}
	}

	page {
		background-color: #F7F7F7;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.back-icon {
		margin-left: 20rpx;
		background-color: rgba($color: #000000, $alpha: .3);
		width: 54rpx;
		height: 54rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
